<template>
  <div class="date-filter mb-4 flex items-center justify-between">
    <div class="flex items-center">
      <ToggleGroup v-model="activeButton" :options="dateOptions" @change="setActiveButton" />

      <el-date-picker v-model="selectedDate" type="date" :placeholder="t('common.selectDate')" class="ml-2" />

      <div class="ml-2">
        <CustomTabs v-model="activeTab" :tabs="tabs" @change="handleTabChange" />
      </div>
    </div>

    <div class="filter-tabs flex gap-2">
      <div class="text-xs text-gray-500 flex items-center gap-2">
        <span class="text-gray-500 text-base">{{ lastUpdated }}</span>
        <!-- <MynauiRefresh class="w-4 h-4 cursor-pointer" @click="handleRefresh" /> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
// import MynauiRefresh from "./assets/mynaui/refresh.png";
import { dateOptions as dateData } from "../data";
import ToggleGroup from "@/components/ToggleGroup/index.vue";
import CustomTabs from "@/components/CustomTabs";
import { useI18n } from "@/composables/useI18n";

const { t } = useI18n();

const dateOptions = [
  { label: "Day", value: "day" },
  { label: "Week", value: "week" },
  { label: "Month", value: "month" },
  { label: "Year", value: "year" }
];

const selectedDate = ref(dateData.currentDate);
const lastUpdated = ref(dateData.latestUpdate);
const activeButton = ref("day");
const activeTab = ref("data");

// 标签配置
const tabs = [
  { name: "data", label: "Data" },
  { name: "analysis", label: "Analysis" }
];

const emit = defineEmits(["dateChange", "tabChange"]);

const setActiveButton = (value: string) => {
  activeButton.value = value;
};

const handleTabChange = (tab: string) => {
  activeTab.value = tab;
  emit("tabChange", activeTab.value);
};

const handleRefresh = () => {
  console.log("refresh");
};

// 监听日期类型变化
watch(activeButton, newValue => {
  emit("dateChange", { type: newValue, date: selectedDate.value });
});

// 监听具体日期变化
watch(selectedDate, newValue => {
  emit("dateChange", { type: activeButton.value, date: newValue });
});
defineExpose({
  selectedDate
})
</script>

<style scoped lang="scss"></style>
